// todo 封装的移动端点击，滑动事件
const myTouch = {
    // 封装点击   需要两个参数
        // el 绑定事件的元素   即 对谁进行操作
        // callback 回调函数   即 干了什么事儿
    tap( el , callback ){
        // 1 判断操作的el 是不是元素
        if(el.nodeType === 1){
            // 2 记录摁下的时间
            let startTime = 0;
            // 3 记录是否产生了移动
            let isMove = false ;
            // 4 开始触摸
            el.addEventListener("touchstart" , () => {
                startTime = new Date();
                // console.log("摁死我了~")
            })  
            // 5 触摸 移动
            el.addEventListener("touchmove" , () => {
                isMove = true
                // console.log(`飘逸~`)
            })
            // 6 触摸结束
            el.addEventListener("touchend" , () => {
                // console.log("释放~")
                // 记录结束时间
                let endTime = new Date();
                // 判断
                // 1 是否产生了移动
                // 2 判断时间差值在150ms外  视为长摁
                // 即 既没有移动 且时间差值在150内 视为点击
                if( !isMove && endTime - startTime <= 150 ){
                    callback && callback()
                }
                if( isMove ) { 
                    // console.log("进行了移动") ; 
                }else if( endTime - startTime > 150 ) { 
                    // console.log("长摁")
                }

                isMove = false
                startTime = 0
            })
        }
    } ,

    // 封装滑动 需要三个参数
        // el 绑定事件的元素   即 对谁进行操作
        // dir 方向            即 滑动的方向
        // callback 回调函数   即 干了什么事儿
    touch( el , dir , callback ){
        // 1 判断操作的el 是不是元素
        if(el.nodeType === 1){
            let startPos = null ;  // 记录摁下的开始位置
            let endPos = null ;    // 记录结束位置

            el.addEventListener("touchstart" , e => {
                // 记录开始位置
                startPos = {
                    x : e.touches[0].clientX ,
                    y : e.touches[0].clientY
                }
            })

            el.addEventListener("touchmove" , e => {
                // 记录结束位置  每次移动都有可能结束  实时移动更新
                endPos = {
                    x : e.touches[0].clientX ,
                    y : e.touches[0].clientY
                }
            })

            el.addEventListener("touchend" , e => {
                if( startPos && endPos && this.direction(startPos , endPos) === dir ){
                    callback && callback()
                }
            })
        }
    },
    // 判断方向
    direction( start , end ){
        // 先计算每个轴移动的距离
        let absX = Math.abs( start.x - end.x )
        let absY = Math.abs( start.y - end.y )
        // 判断是否产生了移动
        if( absX > 20 || absY > 20 ){
            // 判断哪个轴进行移动
            if(absX > absY){
                // 判断方向
                return start.x - end.x > 0 ? 'left' : 'right'
            }else{
                return start.y - end.y > 0 ? 'up' : 'down'
            }
        }
    }
}